<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/jquery-3.6.0.min.js"></script>
    <style>
        body{
            margin: 3px;
            padding: 5px;
        }
        th{
            background-color: #E9E7E7;
        }
        textarea{
            width: 100%;
            border:none;
        }
        #tourist>th{
            background-color: #ffffff;
         }
        td,#tourist>th{
            text-align:center;
        }
        input{
            border:none;
        }

    </style>
</head>
<body>
<!-- 内容区域 -->

<%--订单信息--%>
    <table class="layui-table">
        <colgroup>
            <col width="300">
            <col width="300">
            <col>
        </colgroup>
        <tr ><th colspan="4">订单信息</th></tr>
        <tr>
            <td>订单编号</td>
            <td>
                <input type="text" class="form-control" placeholder="订单编号"
                       value="${order.orderNum}" readonly="readonly">
            </td>
            <td style="width: 200px;">下单时间</td>
            <td>
                <i class="layui-icon layui-icon-date"></i>
                <input type="text" class="form-control pull-right"
                       id="datepicker-a3" readonly="readonly"
                       value="${order.orderTimeStr}">
            </td>
        </tr>
        <tbody>
        <tr>
            <td>路线名称</td>
            <td>
                <input type="text" class="form-control" placeholder="路线名称"
                       value="${order.product.productName }" readonly="readonly">
            </td>
            <td>出发城市</td>
            <td>
                <input type="text" class="form-control" placeholder="出发城市"
                       value="${order.product.cityName }" readonly="readonly">
            </td>
        </tr>
        <tr>
            <td>出发时间</td>
            <td>
                <i class="layui-icon layui-icon-date"></i>
                <input type="text" class="form-control pull-right"
                       id="datepicker-a6" value="<fmt:formatDate value="${order.product.departureTime}" pattern="yyyy-MM-dd HH:mm"/>"
                       readonly="readonly">
            </td>
            <td>出游人数</td>
            <td>
                <input type="text" class="form-control" placeholder="出游人数"
                       value="${order.peopleCount}" readonly="readonly">
            </td>
        </tr>
        <tr>
            <td>订单描述</td>
            <td colspan="3">
                <textarea class="form-control" rows="3" placeholder="订单描述" readonly="readonly">
                    ${order.orderDesc }
                </textarea>
            </td>
        </tr>
        </tbody>
        <!--订单信息/-->
        <!--游客信息-->
            <table class="layui-table">
                <colgroup>
                    <col width="300">
                    <col width="300">
                    <col>
                </colgroup>
                <thead>
                <tr ><th colspan="6">游客信息</th></tr>
                <tr id="tourist">
                    <th>人群</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <th>证件类型</th>
                    <th>证件号码</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${order.travellers}" var="traveller">
                    <tr>
                        <td>${traveller.travellerTypeStr}</td>
                        <td><input type="text" size="10" value="${traveller.name }"
                                   readonly="readonly"></td>
                        <td><input type="text" size="10" value="${traveller.sex }"
                                   readonly="readonly"></td>
                        <td><input type="text" size="20"
                                   value="${traveller.phoneNum}" readonly="readonly"></td>
                        <td><input type="text" size="15"
                                   value="${traveller.credentialsTypeStr}" readonly="readonly"></td>
                        <td><input type="text" size="28"
                                   value="${traveller.credentialsNum }" readonly="readonly"></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
<%--        </div>--%>
        <!--游客信息/-->
        <!--联系人信息-->
            <table class="layui-table">
                <colgroup>
                    <col width="300">
                    <col width="300">
                    <col>
                </colgroup>
                <tr ><th colspan="4">联系人信息</th></tr>
                <tr>
                    <td>会员</td>
                    <td>
                        ${order.member.nickName }
                    </td>
                    <td>联系人</td>
                    <td>
                        ${order.member.name}
                    </td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>
                        ${order.member.phoneNum}
                    </td>
                    <td>邮箱</td>
                    <td>
                        ${order.member.email}
                    </td>
                </tr>
            </table>
        </div>
        <!--联系人信息/-->
        <!--费用信息-->
        <c:if test="${order.orderStatus==1}">
                <table class="layui-table">
                    <colgroup>
                        <col width="300">
                        <col width="300">
                        <col>
                    </colgroup>
                    <tr ><th colspan="4">费用信息</th></tr>
                    <tr>
                        <td>支付方式</td>
                        <td>
                                ${order.payTypeStr}
                        </td>
                    </tr>
                    <tr>
                        <td>金额</td>
                        <td>
                            ￥${order.product.productPrice}
                        </td>
                    </tr>
                </table>
        </c:if>
        <!--费用信息/-->
        <!--工具栏-->
        <div class="box-tools text-center" style="float: right">
            <button type="button" class="layui-btn" lay-filter="formDemo"
                    onclick="history.back(-1);">返回</button>
            </div>
         <!--工具栏/-->
    <!-- 正文区域 /-->


<%--</div>--%>
    </table>
</body>
</html>
